<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<!-- <el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i> 订单管理
				</el-breadcrumb-item> -->
			</el-breadcrumb>
		</div>
		<div class="container">
		<el-form :inline="true" :model="editForm" class="user-search" style="float: right;">
			    <el-select v-model="editForm.orderstate" placeholder="订单状态" class="handle-select mr10">
			        <el-option key="1" label="待付款" value="3"></el-option>
			        <el-option key="2" label="未配送" value="25"></el-option>
					<el-option key="3" label="待收货" value="2"></el-option>
					<el-option key="4" label="已完成" value="1"></el-option>
          <el-option key="5" label="已评价" value="39"></el-option>
			    </el-select>
				<el-input v-model="editForm.low" placeholder="最低价格" class="handle-input mr10"></el-input>
				<el-input v-model="editForm.high" placeholder="最高价格" class="handle-input mr10"></el-input>
			    <el-input v-model="editForm.orderNo" placeholder="订单编号" class="handle-input mr10"></el-input>
			    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
	    </el-form>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
				@selection-change="handleSelectionChange">

        <el-table-column header-align="center" align="center" type="index" label="序号" fixed="left"></el-table-column>
				<el-table-column prop="orderId" label="ID" width="55" align="center"></el-table-column>
				<el-table-column prop="orderNo" label="订单编号"></el-table-column>
				<el-table-column prop="orderTime" label="下单时间"></el-table-column>
				<el-table-column prop="address" label="收货地址"></el-table-column>
				<el-table-column prop="money" label="订单总金额"></el-table-column>
				<el-table-column prop="name" label="优惠券"></el-table-column>
				<el-table-column prop="deliveryFee" label="配送费"></el-table-column>
				<el-table-column prop="num" label="购买商品数量"></el-table-column>
			<el-table-column prop="codeName" label="状态">
        <template #default="scope">
            <el-tag :type="
                    scope.row.codeName === '已完成'
                        ? 'success'
                        : scope.row.codeName === '未配送'
                        ? 'danger'
                        : scope.row.codeName === '待收货'
                        ? 'warning'
                        : scope.row.codeName === '待付款'
                        ? 'info'
                        : scope.row.codeName === '已评价'
                        ? 'error'
                        : ''
                ">{{ scope.row.codeName }}</el-tag>
        </template>
      </el-table-column>
				<el-table-column label="操作" width="200" align="center">
				    <template #default="scope">
						<el-button type="text" icon="el-icon-thumb" @click="handleEdit(scope.$index, scope.row)">查看
						</el-button>
				        <el-button v-if="scope.row.orderState==39" type="text" icon="el-icon-edit" @click="openEdit(scope.$index, scope.row)">评语
				        </el-button>
				        <el-button v-if="scope.row.orderState!=1 && scope.row.orderState!=39" type="text" icon="el-icon-delete" class="red"
				            @click="handleDelete(scope.$index, scope.row)">取消</el-button>
				    </template>
				</el-table-column>
			</el-table>
	<div class="pagination">
	  <el-pagination background layout="total, prev, pager, next" :current-page="this.pageIndex"
	    :page-size="this.pageSize" :total="pageTotal" @size-chage="handleSizeChange" @current-change="handlePageChange"></el-pagination>
	</div>
		</div>

		<!-- 订单详情 -->
		<el-dialog title="订单详情" :visible.sync="editVisible" width="40%" >
		<el-table :data="seeTableData" border class="table" ref="multipleTable">
			<el-table-column prop="images" label="商品图片">
			  <template #default="scope">
			              <el-image class="table-td-thumb" :src="ip+scope.row.images" :preview-src-list="[ip+scope.row.images]">
			              </el-image>
			            </template>
			</el-table-column>
			<el-table-column prop="goodsName" label="商品名称"></el-table-column>
			<el-table-column prop="goodsNum" label="商品数量"></el-table-column>
			<el-table-column prop="goodsPrice" label="商品单价"></el-table-column>
		</el-table>
		</el-dialog>

    <!-- 评价详情 -->
    <el-dialog title="评价详情" :visible.sync="replytVisible" width="40%" >
    <el-table :data="replyTableData" border class="table" ref="multipleTable">
    	<el-table-column prop="evaluate" label="顾客评价"></el-table-column>
    </el-table>
    </el-dialog>


	</div>
</template>

<script>
	export default {
		name: 'basetable',
		data() {
			return {
				tableData:[],
        seeTableData:[],
        replyTableData:[],
				multipleSelection: [],
				delList: [],
				editVisible: false,
        replytVisible: false,
				pageIndex: 1,
				pageSize: 5,
				pageTotal: "",
         ip:'http://43.142.173.112:16622/images/',
				form: {},
        // 搜索框
        editForm: {
          orderstate: "",
          low: "",
          high: "",
          orderNo: ""
        },
				idx: -1,
				id: -1
			};
		},
		created() {
			 this.handleSearch();
		},
		methods: {
			// 获取 easy-mock 的模拟数据
			getData() {

			},
			// 触发搜索按钮
			handleSearch() {
          let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))

				this.$axios.post('/adminOrder/search', this.$qs.stringify({
          shopsId: userInfo.shopsId,
				  pagenum: this.$data.pageIndex,
				  pagesize: this.$data.pageSize,
				  orderState: this.editForm.orderstate>0 ?this.editForm.orderstate:0,
				  low: this.editForm.low>0 ?this.editForm.low:0,
				  high: this.editForm.high>0 ?this.editForm.high:0,
				  orderNo: this.editForm.orderNo>0 ?this.editForm.orderNo:0,
				  headers: {
				    'Content-Type': 'application/json;charset=UTF-8'
				  },
				})).then(response => {
				  console.log(response)
				  // eslint-disable-next-line eqeqeq
				  if (response.data != null) {


				    // 接收后台发来的map集合table是表数据，total是总数
				    this.tableData = response.data.table
				    this.pageTotal = response.data.total

				  }
				}).catch(err => {
				  alert(err)
				})
			},
			// 删除操作
			handleDelete(index, row) {
 this.$confirm('此操作将取消该订单, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
  this.$axios.post('/adminOrder/del', this.$qs.stringify({
    orderId: row.orderId

  })).then(response => {
  				  console.log(response)
  				  if (response.data != null) {
  				      		console.log('数据接收');
  				      console.log(response.data)
  				    if(response.data=='1'){
  				      this.$message({
  				        type: 'success',
  				        message: '取消成功!'
  				      });
this.handleSearch();
  				    }else{
  				      this.$message({
  				        type: 'fail',
  				        message: '取消失败!'
  				      });
  				    }
  				    }
  				  })
  				    }).catch(() => {
  				      this.$message({
  				        type: 'info',
  				        message: '已取消删除'
  				      });
  				    });

			},
			// 多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			delAllSelection() {

			},
			// 查看操作
			handleEdit(index, row) {

        this.$axios.post('/adminOrder/details', this.$qs.stringify({
          orderNo: row.orderNo

          // headers: {
          //   'Content-Type': 'application/json;charset=UTF-8'
          // },
        })).then(response => {
          console.log(response)
          // eslint-disable-next-line eqeqeq
          if (response.data != null) {

this.$data.editVisible = true;
            // 接收后台发来的map集合table是表数据，total是总数
            this.seeTableData = response.data.table


          }
        }).catch(err => {
          alert(err)
        })
			},
      // 评价查询
      openEdit(index, row) {
  this.$axios.post('/adminOrder/evaluate', this.$qs.stringify({
          orderNo: row.orderNo

          // headers: {
          //   'Content-Type': 'application/json;charset=UTF-8'
          // },
        })).then(response => {
          console.log(response)
          // eslint-disable-next-line eqeqeq
          if (response.data != null) {

 this.$data.replytVisible= true;
            // 接收后台发来的map集合table是表数据，total是总数
            this.replyTableData = response.data.table


          }
        }).catch(err => {
          alert(err)
        })

      },

			// 保存编辑
			saveEdit() {

			},
	//       // 分页导航
	      handlePageChange(val) {
	        this.pageIndex=val
	        this.handleSearch();

	      },
	      //条数
	      handleSizeChange(val){
	        this.pageSize=val
	        this.handleSearch();
	      }
		}
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

.reply{
  margin-left: 260px;
  margin-top: 15px;
}
	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>
